export default {
    namespaced: true,
    state: {
        // 是否显示提示框
        isShowToast: false,
        // 提示内容
        toastMsg: '你好世界',
        // 提示类型  success  danger  warning
        toastType: 'warning'

    },
    mutations: {
        // 修改是否显示提示框
        changeIsShowToast(state, payload) {
            state.isShowToast = payload.isShow;
            if (payload.isShow) {
                state.toastMsg = payload.title;
                state.toastType = payload.type;
            }

        }
    },
    //
    actions: {
        asyncIsShowToast(context, payload) {
            // context.commit
            // 调用mutations中的方法  
            // 1: 显示提示框
            context.commit('changeIsShowToast', payload)
            // 2: 异步操作隐藏提示框
            setTimeout(() => {
                context.commit('changeIsShowToast', {
                    isShow: false,
                });
            }, 1000);
        }
    }


}

/* 
    1. 创建了Toast组件（基本样式）
    2. 在App.vue中引入组件并使用。
    3. 将是否显示，提示内容，类型等数据存储到vux中。
    4. 在Toast组件中使用state中的数据--检查
    5. 在Login.vue中调用vuex中方法修改提示内容，提示类型，以及显示。
    6. 自动隐藏提示框内容- 调用vuex中方法，将是否显示设置为false
    7. 增加过渡效果
    8. 在vuex中自动关闭提示框（actions) 
*/